<template>
<div class="todo-container">
    <div class="todo-wrap">
        
        <Header :addTodo="addTodo"/>
        <List :todos="todos" :deleteTodo="deleteTodo" :updateTodo="updateTodo"/>
        <Footer :todos="todos" :checkAll="checkAll" :clearAll="clearAll" />
        
    </div>
</div>
</template> 
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch} from 'vue'
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'

import { Todo } from './types/todo'

export default defineComponent ({
    name: 'App',
    components: {
        Header,
        List,
        Footer
    },
    setup() {
        const state = reactive<{todos:Todo []}>({
            todos: [
                {
                    id: 1,
                    title: '奔驰',
                    isCompleted: false
                },
                {
                    id: 2,
                    title: '宝马',
                    isCompleted: false
                },
                {
                    id: 3,
                    title: '奥迪',
                    isCompleted: false
                }
            ]
        })
        const addTodo = (todo:Todo) => {
            state.todos.unshift(todo)
        }
        // delete 
        const deleteTodo = (index: number) => {
            
            state.todos.splice(index, 1)
        }
        // 修改todo的状态
        const updateTodo = (todo:Todo, isCompleted: boolean) => {
            console.log(todo,isCompleted)
            todo.isCompleted = isCompleted
        }
        // 全选或 全不选
        const checkAll = (isCompleted:boolean) => {
            state.todos.forEach(todo=> {
                todo.isCompleted = isCompleted
            })
        }
        // 清理所有选中的数据
        const clearAll = ()=> {
            state.todos = state.todos.filter(todo => !todo.isCompleted)
        }

        return {
            ...toRefs(state),
            addTodo,
            deleteTodo,
            updateTodo,
            checkAll,
            clearAll
        }
    }
})

</script>


<style scoped>
/* app */
.todo-container {
	width: 600px;
	margin: 0 auto;
}

.todo-container .todo-wrap {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
</style>